<template>
    <el-cascader v-model="area" :props="props" ></el-cascader>
</template>
<script>
import { post } from '@/assets/js/http'
export default {
    data() {
        return {
            area: [],
			areaname:[],
            props: {
                lazy: true,
                async lazyLoad(node, resolve) {
                    const { level, value } = node;
                    let url = '';
                    switch (level) {
                        case 0:
                            url = '/api/common/getProvinceList';
                            break;
                        case 1:
                            url = '/api/common/getCityList';
                            break;
                        case 2:
                            url = '/api/common/getAreaList';
                            break;
                        case 3:
                            url = '/api/common/getStreetList'
                    }
                    let data = await post({
                        url,
                        data: {
                            province_id: level == 1 ? value.id : '',
                            city_id: level == 2 ? value.id : '',
                            area_id: level == 3 ? value.id : '',
                        }
                    })
					
                    if (!data.length) {
                        node.config.leaf = true
                        resolve(null)
                        return
                    }

                    resolve(data.map((item) => {
                        return {
                            label: item.name,
                            value: item,
                            leaf: level > 2 || !data.length
                        }
                    }))
                }
            }
        }
    },
    props:{
        value:{
            type:Array,
            default(){
                return []
            }
        }
    },
    watch:{
        area(){
            this.$emit('input',this.area)
        }
    }
}
</script>